<template>
  <el-row style="background-color:#ececec ;">
    <el-col :span="3">
    </el-col>
    <el-col :span="18">
      <h1 class="vesselParticularSiteTitle">港口指南</h1>
    </el-col>
    <el-col :span="3">
    </el-col>
  </el-row>
  <el-row style="margin-top:10px">
    <el-col :span="3">
    </el-col>
    <el-col :span="18">
      <el-row>
        <el-col :span="11">
          <!-- <el-input size="large" style="width:60%" v-model="state.searchText" clearable placeholder="请输入港口名称">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input> -->
          <el-autocomplete class="inline-input w-50" size="large" v-model="state.searchText" style="width:60%" placeholder="请输入港口名称" clearable :trigger-on-focus="false" :fetch-suggestions="changeserch" @select="handleSearch">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
            <!-- <template #append>
              <el-button size="large" @click="handleSearch" type="primary" style="margin-left:5px">搜索</el-button>
            </template> -->
          </el-autocomplete>
          <el-button size="large" @click="handleSearch" type="primary" style="margin-left:5px">搜索</el-button>
        </el-col>
        <el-col :span="11">
          <el-input size="large" style="width:60%;" v-model="state.countryname" clearable placeholder="请输入国家名称">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <el-button size="large" @click="countrySearch" type="primary" style="margin-left:5px">搜索</el-button>
        </el-col>
        <el-col :span="2" style="display: flex; justify-content: flex-end; align-items: center;">
          <el-button size="large" @click="refresh">
            <el-icon size="large">
              <Refresh />
            </el-icon>
          </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
        <el-table stripe :data="state.tableData" border style="width: 100%">

          <el-table-column align="center" label="港口名" min-width="35%">
            <template v-slot="{ row }">
              <span>{{ row.port_name }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="port_id" label="港口ID" min-width="10%" />

          <el-table-column align="center" label="国家" min-width="10%">
            <template v-slot="{ row }">
              <span :class="'flag-icon flag-icon-' + row.icon">
              </span>
              <br>
              {{ row.country_cn }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="天气" min-width="10%">
            <template v-slot="{ row }">
              <el-icon size="40" v-if="row.weathertype==1">
                <Pouring />
              </el-icon>
              <el-icon size="40" v-if="row.weathertype==2">
                <Sunny />
              </el-icon>
              <el-icon size="40" v-if="row.weathertype==3">
                <PartlyCloudy />
              </el-icon>
              <el-icon size="40" v-if="row.weathertype==4">
                <MostlyCloudy />
              </el-icon>
              <el-icon size="40" v-if="row.weathertype==5">
                <Drizzling />
              </el-icon>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="time" label="当地时间" min-width="25%" />

          <el-table-column align="center" prop="ship_number" label="在港船舶" min-width="10%" />
        </el-table>
        <el-row style="margin-top:10px;width:100% ;display: flex; align-items: center; justify-content: space-between;">
          <span>共 {{ state.numbercount }} 个结果</span>
          <el-pagination v-model:current-page="state.currentPage" background layout="prev, pager, next" :total=state.numbercount @current-change="handlePageChange" style="margin-right: 0;" />
        </el-row>
      </el-row>
    </el-col>
    <el-col :span="3">
    </el-col>
  </el-row>
</template>
<script setup>
import {
  Refresh,
  Pouring,
  Sunny,
  PartlyCloudy,
  MostlyCloudy,
  Drizzling,
} from "@element-plus/icons-vue";
// import "flag-icon-css/css/-icons.css";
import axios from "axios";
import { onMounted, nextTick, ref, reactive, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
const urlGo = import.meta.env.VITE_backurl_go;
const state = reactive({
  numbercount: 0,
  searchText: "",
  tableData: null,
  countryname: "",
  liststuta: 1,
  countryrecord: "",
  portList: [],
  portrecord: "",
  currentPage: null,
});
onMounted(() => {
  get_pageinfo("1");
});

const refresh = () => {
  get_pageinfo("1");
  state.portrecord = "";
  state.countryname = "";
  state.searchText = "";
  state.countryrecord = "";
};

const get_pageinfo = (number) => {
  axios({
    method: "get",
    url: urlGo + "/port/getPortListByPage",
    params: {
      page: number,
      pageSize: "10",
    },
  })
    .then((res) => {
      // console.log(res.data.data.portList);
      state.numbercount = res.data.data.count;
      state.tableData = res.data.data.portList.map((item) => {
        const match = item.country.match(/\(([A-Za-z]+)\)/);
        item.icon = match ? match[1].toLowerCase() : null;
        item.weathertype = Math.floor(Math.random() * 5) + 1;
        item.time = calculateLocalTime(item.lon);
        item.ship_number = Math.floor(Math.random() * 201);
        state.liststuta = 1;
        return item;
      });
      // console.log(state.tableData);
    })
    .catch((error) => {
      console.error("getPortListByPage error: ", error);
    });
};

const getcountryname = (page, countryName) => {
  axios({
    method: "get",
    url: urlGo + "/port/getPortListByCountryName",
    params: {
      page: page,
      pageSize: "10",
      countryName: countryName,
    },
  })
    .then((res) => {
      // console.log(res.data.data.count);
      state.numbercount = res.data.data.count;
      state.tableData = res.data.data.portList.map((item) => {
        const match = item.country.match(/\(([A-Za-z]+)\)/);
        item.icon = match ? match[1].toLowerCase() : null;
        item.weathertype = Math.floor(Math.random() * 5) + 1;
        item.time = calculateLocalTime(item.lon);
        item.ship_number = Math.floor(Math.random() * 201);
        state.liststuta = 3;
        return item;
      });
    })
    .catch((error) => {
      console.error("getPortListByPage error: ", error);
    });
};

const calculateLocalTime = (lon) => {
  const currentUTC = new Date();
  const timezoneOffset = Math.round(lon / 15) * 60;
  const localTime = new Date(currentUTC.getTime() + timezoneOffset * 60 * 1000);
  const options = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    timeZoneName: "short",
  };
  const formattedTime = localTime.toLocaleString("en-US", options);
  return formattedTime;
};

const handleSearch = () => {
  state.currentPage = 1;
  get_portname("1", state.searchText);
  state.portrecord = state.searchText;
};

const countrySearch = () => {
  state.currentPage = 1;
  getcountryname("1", state.countryname);
  state.countryrecord = state.countryname;
};

const changeserch = (queryString) => {
  state.portList = [];
  axios({
    method: "get",
    url: urlGo + "/port/getPortListByPortName",
    params: {
      page: "1",
      pageSize: "20",
      portName: queryString,
    },
  })
    .then((res) => {
      if (res.data.data.count != 0) {
        var list = res.data.data.portList;
        for (let i = 0; i < list.length; i++) {
          if (state.portList.length <= 100) {
            state.portList.push({
              value: list[i].port_name,
              link: list[i].port_name,
            });
          } else {
            break;
          }
        }
      }
    })
    .catch((error) => {
      console.error("getPortListByPage error: ", error);
    });
  // console.log(state.portList);
  return state.portList;
};

const get_portname = (pagenumber, portname) => {
  axios({
    method: "get",
    url: urlGo + "/port/getPortListByPortName",
    params: {
      page: pagenumber,
      pageSize: "10",
      portName: portname,
    },
  })
    .then((res) => {
      // console.log(res);
      // console.log(res.data.data.count);
      state.numbercount = res.data.data.count;
      state.tableData = res.data.data.portList.map((item) => {
        const match = item.country.match(/\(([A-Za-z]+)\)/);
        item.icon = match ? match[1].toLowerCase() : null;
        item.weathertype = Math.floor(Math.random() * 5) + 1;
        item.time = calculateLocalTime(item.lon);
        item.ship_number = Math.floor(Math.random() * 201);
        state.liststuta = 2;
        return item;
      });
    })
    .catch((error) => {
      console.error("getPortListByPage error: ", error);
    });
};

const handlePageChange = (pageNumber) => {
  if (state.liststuta == 1) {
    get_pageinfo(pageNumber.toString());
  }
  if (state.liststuta == 2) {
    get_portname(pageNumber, state.portrecord);
  }
  if (state.liststuta == 3) {
    getcountryname(pageNumber, state.countryrecord);
  }
};
</script>

<style lang="less" scoped>
.vesselParticularSiteTitle {
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 5px;
  margin-bottom: 5px;
  color: #339eff;
  font-family: SimSun;
}
</style>